<template>
    <page-container>
        <!-- <div class="flex left-right-wrap">
            <div class="left-wrap">
                <left-tree v-model:checked="queryParams.projectCode" @checked="handleTreeCheck"></left-tree>
            </div>
            <div class="right-wrap"> -->
        <div class="ant-pro-table">
            <div class="ant-pro-table-search">
                <a-form layout="horizontal">
                    <a-row :gutter="16" type="flex" justify="start">
                        <a-col :xs="12" :sm="12" :md="6" :lg="4">
                            <a-form-item hide-label>
                                <a-tree-select
                                    show-search
                                    style="width: 100%"
                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                    allow-clear
                                    multiple
                                    tree-checkable
                                    :treeDefaultExpandedKeys="[treeData[0]?.code]"
                                    :tree-data="treeData"
                                    :field-names="{
                                        children: 'children',
                                        label: 'name',
                                        value: 'code',
                                    }"
                                    :max-tag-count="1"
                                    v-model:value="queryParams.projectCode"
                                    placeholder="项目选择"
                                    tree-node-filter-prop="label"
                                    @change="handleTreeCheck"
                                ></a-tree-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="6" :lg="3">
                            <a-form-item>
                                <a-select
                                    v-model:value="queryParams.dimension"
                                    placeholder="查询维度"
                                    :options="[
                                        {
                                            label: '按事业部',
                                            value: 0,
                                        },
                                        {
                                            label: '按项目',
                                            value: 1,
                                        },
                                    ]"
                                    allow-clear
                                    @change="handleSearch"
                                ></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="6" :lg="3">
                            <a-form-item>
                                <a-select
                                    v-model:value="queryParams.orderType"
                                    placeholder="工单类型"
                                    :options="[
                                        {
                                            label: '投诉工单',
                                            value: 1,
                                        },
                                        {
                                            label: '报事报修',
                                            value: 0,
                                        },
                                    ]"
                                    allow-clear
                                    @change="handleOrderTypeChange"
                                ></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="6" :lg="3" v-if="queryParams.orderType == 1 || queryParams.orderType == 0">
                            <a-form-item>
                                <a-select
                                    v-model:value="queryParams.orderClassifyId"
                                    :placeholder="isNull(queryParams.orderType) && isUndefined(queryParams.orderType) ? `请先选择工单类型` : `工单分类`"
                                    :options="classifyList"
                                    allow-clear
                                    :field-names="{ label: 'classifyName', value: 'id' }"
                                    @change="handleSearch"
                                ></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="6" :lg="3">
                            <a-form-item>
                                <a-select
                                    ref="select"
                                    v-model:value="queryParams.orderProperty"
                                    placeholder="工单属性"
                                    :options="[
                                        {
                                            label: '全部',
                                            value: '',
                                        },
                                        {
                                            label: '客户类',
                                            value: 0,
                                        },
                                        {
                                            label: '员工类',
                                            value: 1,
                                        },
                                    ]"
                                    allow-clear
                                    @change="handleSearch"
                                ></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="6" :lg="3">
                            <a-form-item>
                                <a-select
                                    v-model:value="queryParams.orderChargeCompany"
                                    placeholder="责任归属"
                                    :options="[
                                        {
                                            label: '物业',
                                            value: 0,
                                        },
                                        {
                                            label: '地产',
                                            value: 1,
                                        },
                                    ]"
                                    allow-clear
                                    @change="handleSearch"
                                ></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="12" :sm="12" :md="7" :lg="4">
                            <a-form-item>
                                <a-range-picker v-model:value="queryParams.orderTime" :placeholder="['开始时间', '结束时间']" allow-clear @change="handleSearch()" />
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :xs="24" :sm="24" :md="12" :lg="4">
                                    <a-button @click="handleSearch" type="primary">搜索</a-button>
                                    <a-button @click="handleReset" class="ml-5px">重置</a-button>
                                </a-col> -->
                    </a-row>
                </a-form>
            </div>
            <a-card :body-style="{ padding: 0 }" ref="elRef">
                <div class="ant-pro-table-list-toolbar">
                    <div class="ant-pro-table-list-toolbar-container">
                        <div class="ant-pro-table-list-toolbar-left"></div>
                        <div class="ant-pro-table-list-toolbar-right">
                            <a-space align="center">
                                <a-button @click="handleExport" class="ml-10px" :loading="exportLoading">
                                    <download-outlined />
                                    导出
                                </a-button>
                                <div class="ant-pro-table-list-toolbar-setting-item">
                                    <a-tooltip title="表格斑马纹">
                                        <a-switch checked-children="开" un-checked-children="关" v-model:checked="fetchDataContext.stripe" />
                                    </a-tooltip>
                                </div>
                            </a-space>
                            <div class="ant-pro-table-list-toolbar-divider">
                                <a-divider type="vertical" />
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="刷新">
                                    <reload-outlined @click="reload" />
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="密度">
                                    <a-dropdown :trigger="['click']" placement="bottomRight">
                                        <column-height-outlined />
                                        <template #overlay>
                                            <a-menu
                                                style="width: 80px"
                                                :selected-keys="[state.tableSize]"
                                                @click="
                                                    ({ key }) => {
                                                        fetchDataContext.tableSize = String(key);
                                                    }
                                                "
                                            >
                                                <a-menu-item key="default">
                                                    <a href="javascript:;">默认</a>
                                                </a-menu-item>
                                                <a-menu-item key="middle">
                                                    <a href="javascript:;">中等</a>
                                                </a-menu-item>
                                                <a-menu-item key="small">
                                                    <a href="javascript:;">紧凑</a>
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-popover placement="bottomRight" arrowPointAtCenter trigger="click" overlayClassName="ant-pro-table-column-setting-overlay">
                                    <template #title>
                                        <div class="ant-pro-table-column-setting-title">
                                            <a-checkbox v-model:checked="columnState.checkAll" :indeterminate="columnState.indeterminate" @change="handleColumnAllClick">
                                                列展示 / 排序
                                            </a-checkbox>
                                            <a @click="reset">重置</a>
                                        </div>
                                    </template>
                                    <template #content>
                                        <span class="ant-pro-table-column-setting-list">
                                            <drag-container
                                                lockAxis="y"
                                                dragClass="ant-pro-table-drag-ghost"
                                                dropClass="ant-pro-table-drop-ghost"
                                                @drop="({ removedIndex, addedIndex }) => move(removedIndex, addedIndex)"
                                            >
                                                <template v-for="column in dynamicColumnItems" :key="column.key">
                                                    <draggable>
                                                        <div class="ant-pro-table-column-setting-list-item">
                                                            <drag-icon />
                                                            <a-checkbox :checked="column.checked" @change="handleColumnChange($event, column)">
                                                                {{ column.label }}
                                                            </a-checkbox>
                                                        </div>
                                                    </draggable>
                                                </template>
                                            </drag-container>
                                        </span>
                                    </template>
                                    <a-tooltip title="列设置">
                                        <setting-outlined />
                                    </a-tooltip>
                                </a-popover>
                            </div>
                            <!-- <div class="ant-pro-table-list-toolbar-setting-item">
                                        <a-tooltip :title="screenState ? '退出全屏' : '全屏'">
                                            <fullscreen-outlined v-if="!screenState" @click="setFull" />
                                            <fullscreen-exit-outlined v-else @click="exitFull" />
                                        </a-tooltip>
                                    </div> -->
                        </div>
                    </div>
                </div>
                <a-table
                    :row-class-name="stripe"
                    :size="state.tableSize"
                    :loading="state.loading"
                    :columns="dynamicColumns"
                    :data-source="renderDataSource"
                    :pagination="false"
                    ref="tableRef"
                    :getPopupContainer="_trigger => tableRef.$el"
                    :scroll="{ x: 1150, y: appStore.tableHeight }"
                    border
                    @resizeColumn="handleResizeColumn"
                    id="outTable"
                >
                    <template #bodyCell="{ column, record }">
                        <!-- <template v-if="column.dataIndex === 'timelyRate'">
                                    <span style="color: #f5222d">{{ toFixed(record.timelyRate, 2) }}</span>
                                </template> -->
                        <template v-if="column.dataIndex === 'abnormalFinishTotal'">
                            <span style="color: #f5222d">{{ record.abnormalFinishTotal }}</span>
                        </template>
                        <template v-if="column.dataIndex === 'cancelTotal'">
                            <span style="color: #f5222d">{{ record.cancelTotal }}</span>
                        </template>
                        <template v-if="column.dataIndex === 'overtimeIncompleteTotal'">
                            <span style="color: #f5222d">{{ record.overtimeIncompleteTotal }}</span>
                        </template>
                        <template v-if="column.dataIndex === 'third-orderTotal'">
                            {{ record.orderLength > 0 ? record.statisticsInfo.orderTotal : '0' }}
                        </template>
                        <template v-if="column.dataIndex === 'third-orderRatio'">{{ record.orderLength > 0 ? toFixed(record.statisticsInfo.orderRatio, 2) || '0' : 0 }}%</template>
                        <template v-if="column.dataIndex === 'third-finishTotalCount'">
                            {{ record.orderLength > 0 ? record.statisticsInfo.finishTotalCount || '0' : 0 }}
                        </template>
                        <template v-if="column.dataIndex === 'third-finishTotalRate'">{{ record.orderLength > 0 ? record.statisticsInfo.finishTotalRate || '0' : 0 }}%</template>
                        <template v-if="column.dataIndex === 'third-satisfyTotalRate'">{{ record.orderLength > 0 ? record.statisticsInfo.satisfyTotalRate || '0' : 0 }}%</template>
                        <template v-if="column.dataIndex === 'third-averageFinishTimeTotalStr'">
                            {{ record.orderLength > 0 ? record.statisticsInfo.averageFinishTimeTotalStr || '' : '' }}
                        </template>
                        <!-- <template v-if="column.dataIndex === 'overtimeCount'">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 0)" style="cursor: pointer">{{ record.overtimeCount }}</a-typography-text>
                                </template> -->
                        <template v-if="column.dataIndex === 'spotCheckTotal'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 1)" style="cursor: pointer">
                                {{ record.spotCheckTotal }}
                            </a-typography-text>
                        </template>
                        <template v-if="column.dataIndex === 'spotCheckUnqualifiedTotal'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 2)" style="cursor: pointer">
                                {{ record.spotCheckUnqualifiedTotal }}
                            </a-typography-text>
                        </template>
                        <template v-if="column.dataIndex === 'notFirstFollowTotal'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 3)" style="cursor: pointer">
                                {{ record.notFirstFollowTotal }}
                            </a-typography-text>
                        </template>
                        <template v-if="column.dataIndex === 'notFinishTotalCount'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 4)" style="cursor: pointer">
                                {{ record.notFinishTotalCount }}
                            </a-typography-text>
                        </template>
                        <template v-if="column.dataIndex === 'satisfyTotalAll'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 5)" style="cursor: pointer">
                                {{ record.satisfyTotalAll }}
                            </a-typography-text>
                        </template>
                        <template v-if="column.dataIndex === 'notSatisfyTotal'">
                            <a-typography-text underline @click="handleOvertimeCount(record, 6)" style="cursor: pointer">
                                {{ record.notSatisfyTotal }}
                            </a-typography-text>
                        </template>

                        <template v-if="column.dataIndex === 'project'">
                            {{ record.projectName }}
                            <br />
                            {{ record.chargePerson }}
                        </template>
                        <template v-if="column.dataIndex === 'notFirstFollow'">
                            <a-descriptions :column="1" size="small">
                                <a-descriptions-item label="未首条跟进数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 3)" style="cursor: pointer">
                                        {{ record.notFirstFollowTotal }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="首条跟进率">{{ record.firstFollowRate || 0 }}%</a-descriptions-item>
                            </a-descriptions>
                        </template>
                        <template v-if="column.dataIndex === 'cancel'">
                            <a-descriptions :column="1" size="small">
                                <a-descriptions-item label="作废工单数">{{ record.cancelTotal }}</a-descriptions-item>
                                <a-descriptions-item label="作废工单率">{{ record.cancelRate || 0 }}%</a-descriptions-item>
                            </a-descriptions>
                        </template>
                        <template v-if="column.dataIndex === 'abnormalFinish'">
                            <a-descriptions :column="1" size="small">
                                <a-descriptions-item label="非正常关闭数">{{ record.abnormalFinishTotal }}</a-descriptions-item>
                                <a-descriptions-item label="非正常关闭率">{{ record.abnormalFinishRate || 0 }}%</a-descriptions-item>
                            </a-descriptions>
                        </template>
                        <template v-if="column.dataIndex === 'spotCheck'">
                            <a-descriptions :column="1" size="small">
                                <a-descriptions-item label="被抽检总数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 1)" style="cursor: pointer">
                                        {{ record.spotCheckTotal }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="被抽检不合格数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 2)" style="cursor: pointer">
                                        {{ record.spotCheckUnqualifiedTotal }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="被抽检合格率">{{ record.spotCheckQualifiedRate || 0 }}%</a-descriptions-item>
                            </a-descriptions>
                        </template>
                        <template v-if="column.dataIndex === 'order'">
                            <a-descriptions :column="1" size="small">
                                <a-descriptions-item label="工单总数">{{ record.orderTotal }}</a-descriptions-item>
                                <a-descriptions-item label="工单完成数">{{ record.finishTotalCount }}</a-descriptions-item>
                                <a-descriptions-item label="未完成工单数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 4)" style="cursor: pointer">
                                        {{ record.notFinishTotalCount }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="工单完成率">{{ record.finishTotalRate }}</a-descriptions-item>
                                <a-descriptions-item label="工单评价数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 5)" style="cursor: pointer">
                                        {{ record.satisfyTotalAll }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="工单不满意数">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 6)" style="cursor: pointer">
                                        {{ record.notSatisfyTotal }}
                                    </a-typography-text>
                                </a-descriptions-item>
                                <a-descriptions-item label="工单评价满意率">{{ record.satisfyTotalRate }}</a-descriptions-item>
                                <a-descriptions-item label="平均完成时长">{{ record.averageFinishTimeTotalStr }}</a-descriptions-item>
                                <a-descriptions-item label="超30天未完成报事数">{{ record.overtimeIncompleteTotal }}</a-descriptions-item>
                                <a-descriptions-item label="工单未关单数据">
                                    <a-typography-text underline @click="handleOvertimeCount(record, 4)" style="cursor: pointer">
                                        {{ record.notFinishTotalCount }}
                                    </a-typography-text>
                                </a-descriptions-item>
                            </a-descriptions>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>
        <!-- </div>
        </div> -->
        <count-list :visible="countModalVisible" :model="countModal" @cancel="countModalVisible = false" />
    </page-container>
</template>

<script lang="ts">
    import FileSaver from 'file-saver';
    import * as XLSX from 'xlsx';
    import { defineComponent, reactive, ref, watch, watchEffect, computed, onMounted, onActivated } from 'vue';
    import {
        PlusOutlined,
        ReloadOutlined,
        ColumnHeightOutlined,
        SettingOutlined,
        FullscreenOutlined,
        FullscreenExitOutlined,
        DownOutlined,
        DownloadOutlined,
    } from '@ant-design/icons-vue';
    import { Container as DragContainer, Draggable } from '@/components/draggable';
    import type { Pagination, TableFilters, TableColumn } from '@/typing';
    import { useFetchData } from '@/utils/hooks/useFetchData';
    import { useFullscreen } from '@/utils/hooks/useFullscreen';
    import { useTableDynamicColumns } from '@/utils/hooks/useTableColumn';
    import DragIcon from '@/components/table/drag-icon.vue';
    import dayjs from 'dayjs';
    import { downloadByData } from '@/utils/download';
    import { isEmpty } from 'lodash-es';
    import { getOrderStatisticsProject, getOrderStatisticsUnit } from '@/api/order/statistics';
    import { getList } from '@/api/order/cate';
    import { toFixed, isUndefined, isNull, findTree } from 'xe-utils';
    import CountList from './count-list.vue';
    import { flattenData } from './common';
    import { useAppStore } from '@/store/app';
    import { queryProjectTree } from '@/api/list/project-list';
    import { isNotEmpty } from '@/utils/is';

    const appStore = useAppStore();

    export default defineComponent({
        name: 'TableList',
        setup() {
            const tableRef = ref();
            const exportLoading = ref<boolean>(false);
            const treeData = ref<any[]>([]);
            const filteredInfoMap = ref();
            const queryParams = reactive<any>({
                orderTime: [],
                dimension: 1,
            });
            const fetchDataContext = reactive<any>({
                current: 1,
                pageSize: 10,
                tableSize: 'middle', // 'default' | 'middle' | 'small'
                stripe: false,
                executeImmediately: false,
                isList: true,
                requestParams: { ...queryParams },
            });

            watch(
                filteredInfoMap,
                () => {
                    queryParams.status = filteredInfoMap.value?.status;
                    fetchDataContext.requestParams = { ...queryParams };
                },
                { immediate: true },
            );
            const mergedColumns = ref<TableColumn[]>([]);

            const customCellMethod = _ => {
                const { chargePersonIndex, projectLength } = _;

                return { rowSpan: chargePersonIndex === 0 ? projectLength : 0, colSpan: chargePersonIndex === 0 ? 1 : 0 };
            };

            watchEffect(() => {
                mergedColumns.value = [
                    {
                        title: queryParams.dimension === 1 ? '项目' : '事业部',
                        dataIndex: 'projectName',
                        width: 120,
                        resizable: true,
                        ellipsis: true,
                        fixed: 'left',
                        customCell: _ => {
                            const { projectIndex, totalLength } = _;
                            // console.log(_, index, projectName, projectIndex, projectLength, totalLength);
                            return { rowSpan: projectIndex === 0 ? totalLength : 0, colSpan: projectIndex === 0 ? 1 : 0 };
                        },
                    },
                    {
                        title: queryParams.dimension === 1 ? '员工' : '项目',
                        dataIndex: 'chargePerson',
                        width: 120,
                        resizable: true,
                        ellipsis: true,
                        fixed: 'left',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单总数',
                        dataIndex: 'orderTotal',
                        width: 80,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    // {
                    //     title: '及时接单率',
                    //     dataIndex: 'timelyRate',
                    //     width: 100,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // {
                    //     title: '超时工单数',
                    //     dataIndex: 'overtimeCount',
                    //     width: 100,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    {
                        title: '未首条跟进数',
                        dataIndex: 'notFirstFollowTotal',
                        width: 110,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '首条跟进率',
                        dataIndex: 'firstFollowRate',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单完成数',
                        dataIndex: 'finishTotalCount',
                        customCell: customCellMethod,
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '未完成工单数',
                        dataIndex: 'notFinishTotalCount',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单完成率',
                        dataIndex: 'finishTotalRate',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单评价数',
                        dataIndex: 'satisfyTotalAll',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单不满意数',
                        dataIndex: 'notSatisfyTotal',
                        width: 110,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单评价满意率',
                        dataIndex: 'satisfyTotalRate',
                        width: 120,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单平均完成时长',
                        dataIndex: 'averageFinishTimeTotalStr',
                        width: 130,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '非正常关闭数',
                        dataIndex: 'abnormalFinishTotal',
                        width: 110,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '非正常关闭率',
                        dataIndex: 'abnormalFinishRate',
                        width: 110,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '作废工单数',
                        dataIndex: 'cancelTotal',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '作废工单率',
                        dataIndex: 'cancelRate',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        customCell: customCellMethod,
                    },
                    {
                        title: '超30天未完成报事数',
                        dataIndex: 'overtimeIncompleteTotal',
                        width: 160,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '工单未关单数据',
                        dataIndex: 'notFinishTotalCount',
                        width: 120,
                        resizable: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '被抽检总数',
                        dataIndex: 'spotCheckTotal',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '被抽检不合格数',
                        dataIndex: 'spotCheckUnqualifiedTotal',
                        width: 120,
                        resizable: true,
                        ellipsis: true,
                        customCell: customCellMethod,
                    },
                    {
                        title: '被抽检合格率',
                        dataIndex: 'spotCheckQualifiedRate',
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        width: 110,
                        resizable: true,
                        customCell: customCellMethod,
                    },

                    // {
                    //     title: queryParams.dimension === 1 ? '项目/员工' : '事业部/项目',
                    //     dataIndex: 'project',
                    //     width: 120,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     fixed: 'left',
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: queryParams.dimension === 1 ? '项目' : '事业部',
                    // //     dataIndex: 'projectName',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     fixed: 'left',
                    // //     customCell: _ => {
                    // //         const { projectIndex, totalLength } = _;
                    // //         // console.log(_, index, projectName, projectIndex, projectLength, totalLength);
                    // //         return { rowSpan: projectIndex === 0 ? totalLength : 0, colSpan: projectIndex === 0 ? 1 : 0 };
                    // //     },
                    // // },
                    // // {
                    // //     title: queryParams.dimension === 1 ? '员工' : '项目',
                    // //     dataIndex: 'chargePerson',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     fixed: 'left',
                    // //     customCell: customCellMethod,
                    // // },
                    // {
                    //     title: '工单',
                    //     dataIndex: 'order',
                    //     width: 240,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: '工单总数',
                    // //     dataIndex: 'orderTotal',
                    // //     width: 80,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '及时接单率',
                    // //     dataIndex: 'timelyRate',
                    // //     width: 100,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '超时工单数',
                    // //     dataIndex: 'overtimeCount',
                    // //     width: 100,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // {
                    //     title: '未首条跟进',
                    //     dataIndex: 'notFirstFollow',
                    //     width: 150,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: '未首条跟进数',
                    // //     dataIndex: 'notFirstFollowTotal',
                    // //     width: 130,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '首条跟进率',
                    // //     dataIndex: 'firstFollowRate',
                    // //     width: 100,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单完成数',
                    // //     dataIndex: 'finishTotalCount',
                    // //     customCell: customCellMethod,
                    // //     width: 100,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // // },
                    // // {
                    // //     title: '未完成工单数',
                    // //     dataIndex: 'notFinishTotalCount',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单完成率',
                    // //     dataIndex: 'finishTotalRate',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单评价数',
                    // //     dataIndex: 'satisfyTotalAll',
                    // //     width: 140,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单不满意数',
                    // //     dataIndex: 'notSatisfyTotal',
                    // //     width: 140,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单评价满意率',
                    // //     dataIndex: 'satisfyTotalRate',
                    // //     width: 140,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单平均完成时长',
                    // //     dataIndex: 'averageFinishTimeTotalStr',
                    // //     width: 150,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // {
                    //     title: '非正常关闭',
                    //     dataIndex: 'abnormalFinish',
                    //     width: 170,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: '非正常关闭数',
                    // //     dataIndex: 'abnormalFinishTotal',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '非正常关闭率',
                    // //     dataIndex: 'abnormalFinishRate',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // {
                    //     title: '作废工单',
                    //     dataIndex: 'cancel',
                    //     width: 130,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: '作废工单数',
                    // //     dataIndex: 'cancelTotal',
                    // //     width: 100,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '作废工单率',
                    // //     dataIndex: 'cancelRate',
                    // //     width: 90,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '超30天未完成报事数',
                    // //     dataIndex: 'overtimeIncompleteTotal',
                    // //     width: 160,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '工单未关单数据',
                    // //     dataIndex: 'notFinishTotalCount',
                    // //     width: 140,
                    // //     resizable: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // {
                    //     title: '被抽检',
                    //     dataIndex: 'spotCheck',
                    //     width: 150,
                    //     resizable: true,
                    //     ellipsis: true,
                    //     customCell: customCellMethod,
                    // },
                    // // {
                    // //     title: '被抽检总数',
                    // //     dataIndex: 'spotCheckTotal',
                    // //     width: 100,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '被抽检不合格数',
                    // //     dataIndex: 'spotCheckUnqualifiedTotal',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     ellipsis: true,
                    // //     customCell: customCellMethod,
                    // // },
                    // // {
                    // //     title: '被抽检合格率',
                    // //     dataIndex: 'spotCheckQualifiedRate',
                    // //     ellipsis: true,
                    // //     customRender: ({ text }) => text + '%',
                    // //     width: 120,
                    // //     resizable: true,
                    // //     customCell: customCellMethod,
                    // // },

                    {
                        title: '二级分类',
                        dataIndex: 'orderType',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '三级分类',
                        dataIndex: 'classifyName',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '工单数量',
                        dataIndex: 'third-orderTotal',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '工单占比',
                        dataIndex: 'third-orderRatio',
                        width: 90,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '工单完成数',
                        dataIndex: 'third-finishTotalCount',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                    },
                    {
                        title: '工单完成率',
                        dataIndex: 'third-finishTotalRate',
                        width: 100,
                        resizable: true,
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                    },
                    {
                        title: '工单评价满意率',
                        dataIndex: 'third-satisfyTotalRate',
                        ellipsis: true,
                        customRender: ({ text }) => text + '%',
                        width: 120,
                        resizable: true,
                    },
                    {
                        title: '工单平均完成时长',
                        dataIndex: 'third-averageFinishTimeTotalStr',
                        width: 140,
                        resizable: true,
                    },
                ];
            });
            const needRowIndex = ref(false);
            const {
                state: columnState,
                dynamicColumns,
                dynamicColumnItems,
                handleColumnAllClick,
                handleColumnChange,
                reset,
                move,
            } = useTableDynamicColumns(mergedColumns, { needRowIndex });

            const [elRef, screenState, { setFull, exitFull }] = useFullscreen();

            const { stripe, context: state, reload } = useFetchData(getOrderStatisticsUnit, fetchDataContext);

            const renderDataSource = computed(() => {
                if (isEmpty(state.dataSource)) return [];
                const data = flattenData(state.dataSource);
                console.log(data);
                return data;
            });

            const handleTreeCheck = (checkedKeys, node, extra) => {
                console.log(checkedKeys, node, extra);

                queryParams.projectCode = checkedKeys;
                fetchDataContext.queryMethod = queryParams.dimension === 1 ? getOrderStatisticsUnit : getOrderStatisticsProject;
                fetchDataContext.executeImmediately = true;
                handleSearch();
            };

            const handleTableChange = ({ current, pageSize }: Pagination, filters?: TableFilters) => {
                filteredInfoMap.value = filters;
                fetchDataContext.current = current;
                fetchDataContext.pageSize = pageSize;
            };

            const handleSearch = () => {
                fetchDataContext.current = 1;
                const { orderTime = [], ...params } = queryParams;

                if (!isEmpty(orderTime) && orderTime.length === 2) {
                    params.orderTimeStart = dayjs(orderTime[0]).format('YYYY-MM-DD') + ' 00:00:00';
                    params.orderTimeEnd = dayjs(orderTime[1]).format('YYYY-MM-DD') + ' 23:59:59';
                }
                fetchDataContext.queryMethod = queryParams.dimension === 1 ? getOrderStatisticsProject : getOrderStatisticsUnit;
                fetchDataContext.requestParams = { ...params };
            };
            const handleReset = () => {
                Object.keys(queryParams).forEach(key => {
                    queryParams[key] = undefined;
                });
                queryParams.dimension = 1;
                handleSearch();
            };

            const handleExport = () => {
                const xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
                const wb = XLSX.utils.table_to_book(document.querySelector('#outTable'), xlsxParam); //outTable为列表id
                const wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array',
                });
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }), `工单统计分析.xlsx`);
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            };

            const countModalVisible = ref<boolean>(false);
            const countModal = ref<any>({});

            const handleOvertimeCount = (data: any, detailType: number) => {
                countModal.value = {
                    ...data,
                    detailType,
                    dimension: queryParams.dimension,
                    queryParams: queryParams,
                };
                countModalVisible.value = true;
            };

            const classifyList = ref<any[]>([]);

            const handleOrderTypeChange = () => {
                getList({
                    orderType: queryParams.orderType,
                    size: 10000,
                    current: 1,
                }).then(res => {
                    classifyList.value = res.data;
                    queryParams.orderClassifyId = null;
                    handleSearch();
                });
            };

            const handleResizeColumn = (w, col) => {
                col.width = w;
            };

            onMounted(() => {
                queryProjectTree().then(res => {
                    treeData.value = [res.data];
                    const select = findTree([res.data], item => !isNotEmpty(item.children));
                    queryParams.projectCode = [select.item?.code];
                    fetchDataContext.executeImmediately = true;

                    handleSearch();
                });
            });

            return {
                handleResizeColumn,
                appStore,
                countModalVisible,
                countModal,
                classifyList,
                reload,
                state,
                stripe,
                columnState,
                dynamicColumns,
                dynamicColumnItems,
                queryParams,
                handleSearch,
                handleReset,
                // fullscreen
                elRef,
                screenState,
                setFull,
                exitFull,

                handleTableChange,

                handleColumnChange,
                handleColumnAllClick,
                reset,
                move,

                tableRef,
                fetchDataContext,

                handleTreeCheck,
                handleExport,
                exportLoading,

                renderDataSource,

                toFixed,

                handleOvertimeCount,

                handleOrderTypeChange,

                isNull,
                isUndefined,

                treeData,
            };
        },
        components: {
            DragIcon,
            PlusOutlined,
            ReloadOutlined,
            ColumnHeightOutlined,
            SettingOutlined,
            FullscreenOutlined,
            FullscreenExitOutlined,
            DownOutlined,
            DownloadOutlined,
            Draggable,
            DragContainer,
            CountList,
        },
    });
</script>

<style lang="less" scoped>
    .statistics-wrap {
        width: 100%;
        overflow-x: auto;
        ul {
            width: 100%;
            li {
                list-style: none;
            }

            &:first-of-type {
                li {
                    width: 150px;
                    text-align: center;
                    flex-shrink: 0;
                }
            }
        }
    }
</style>
